<script setup lang="ts"> 
import router from './router';
import { useRoute } from 'vue-router';
let route = useRoute()
// console.log(route.meta.hidden);
</script>
<template>
  <!-- 最外层 -->
  <router-view v-if="route.meta.hidden"></router-view>
  <div class="container" v-else>
    <!-- 内容部分 -->
    <main class="box">
      <header class="header">
        <span>{{ route.meta.title }}</span>
      </header>
      <div class="content"> <router-view></router-view> </div>
    </main>
    <!-- 页脚部分 -->
    <footer class="footer">
      <router-link to="/home">
        <el-icon size="25px">
          <HomeFilled />
        </el-icon>
        <p>首页</p>
      </router-link>
      <router-link to="/community">
        <el-icon size="25px">
          <Comment />
        </el-icon>
        <p>社区</p>
      </router-link>
      <router-link to="/game">
        <el-icon size="25px">
          <Platform />
        </el-icon>
        <p>游戏</p>
      </router-link>
      <router-link to="/my">
        <el-icon size="25px">
          <UserFilled />
        </el-icon>
        <p>我的</p>
      </router-link>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
html,
body,
#app,
.container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
html {
  /*
    目前百分之 90 以上的 UI 设计师会使用 iPhone6,7,8 的尺寸进行设计我们的 设计稿
    如果设计图是 iPhone6,7,8 为基础的设计图，那么我们应该 100 / 375 * 100 = 26.666666666...
    如果设计图是iPhone12Pro 为基础的设计图，那么我们应该 100 / 390 * 100 = 25.641
  */
  font-size: 26.666666666vw;
}

body {
  /*具体的值 要根据设计图来决定，这里的值要是设计图中出现次数最多的字号*/
  font-size: 0.12rem;
}

.container {
  display: flex;
  flex-direction: column;
}

.box {
  flex: 1;
  overflow: auto;
  .header {
    height: 3rem;
    width: 100%;
    background-color: #f66;
    line-height: 3rem;
    text-align: center;
    color: white;
    position: fixed;
    z-index: 9999;
  }

}
.content{
  margin-top: 3rem;
}
.footer {
  height: 4rem;
  background-color: white;
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 9999999999999999999999999999999;
  border-top: 1px solid #ccc;

  .router-link-active {
    color: #f66;
  }
  
  a {
    flex: 1;
    text-decoration: none;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    span {
      padding-top: 0.05rem;
      box-sizing: border-box;
    }
    .el-icon{
      margin-top: 0.5rem;
    }
    p {
      margin: 0.4rem;
      bottom: 0.05rem;
      position: relative;
    }
  }
}</style>